<template>
  <view class="mask-box">
    <view class="bzb plate-box">
      <view class="flex-jcsb flex-vcenter title">
        <text class="title-text">请录入车牌号</text>
        <view @click="cancel">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
      </view>
      <view class="plate-code-box">
        <view class="left-box">
          <view :class="curCodeIndex === 0 ? 'cur-code' : ''" class="code-item left" @click="focusCode(0)">
            {{ code0 }}
          </view>
          <view :class="curCodeIndex === 1 ? 'cur-code' : ''" class="code-item right" @click="focusCode(1)">
            {{ code1 }}
          </view>
        </view>
        <view class="flex-center" style="font-weight: 900; color: #999">·</view>
        <view class="right-box">
          <view :class="curCodeIndex === 2 ? 'cur-code' : ''" class="code-item" @click="focusCode(2)">
            {{ code2 }}
          </view>
          <view :class="curCodeIndex === 3 ? 'cur-code' : ''" class="code-item" @click="focusCode(3)">
            {{ code3 }}
          </view>
          <view :class="curCodeIndex === 4 ? 'cur-code' : ''" class="code-item" @click="focusCode(4)">
            {{ code4 }}
          </view>
          <view :class="curCodeIndex === 5 ? 'cur-code' : ''" class="code-item" @click="focusCode(5)">
            {{ code5 }}
          </view>
          <view :class="curCodeIndex === 6 ? 'cur-code' : ''" class="code-item" @click="focusCode(6)">
            {{ code6 }}
          </view>
        </view>
      </view>
      <view class="flex-center btn-confirm" :class="isValid ? '' : 'disabled'" @click="confirm">确 认</view>
    </view>
    <view class="keyboard">
      <view v-show="curKeyboard === 'province'" class="keymap-province">
        <view class="key" v-for="(item, index) in provinceArr" :key="index" @click="provinceInput(item)">
          {{ item }}
        </view>
      </view>
      <view v-show="curKeyboard === 'code'" class="keymap-code">
        <view class="row-ten-col">
          <view class="key" :class="curCodeIndex === 1 ? 'disabled' : ''" v-for="(item, index) in numRow" :key="index"
            @click="onInput(item)">
            {{ item }}
          </view>
        </view>
        <view class="row-ten-col">
          <view class="key" v-for="(item, index) in letterTopRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('港')">港</view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('澳')">澳</view>
        </view>
        <view class="row-ten-col">
          <view class="key" v-for="(item, index) in letterMidRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view class="key" :class="[6, 7].includes(curCodeIndex) ? '' : 'disabled'" @click="onInput('挂')">挂</view>
        </view>
        <view class="row-last">
          <view></view>
          <view class="key" v-for="(item, index) in letterBottomRow" :key="index" @click="onInput(item)">
            {{ item }}
          </view>
          <view></view>
          <view class="flex-center key" style="background-color: #abb3bd" @click="backspace">
            <image src="../../../static/saleIcon/icon/del.png" mode="" alt="del" class="icon-delete"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, ref, Ref } from 'vue';
  // static
  const provinceArr = [
    '京',
    '津',
    '沪',
    '渝',
    '辽',
    '吉',
    '黑',
    '冀',
    '晋',
    '苏',
    '浙',
    '皖',
    '闽',
    '赣',
    '鲁',
    '豫',
    '鄂',
    '湘',
    '粤',
    '琼',
    '川',
    '贵',
    '云',
    '陕',
    '甘',
    '青',
    '宁',
    '新',
    '藏',
    '桂',
    '蒙',
  ];
  const numRow = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
  const letterTopRow = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P'];
  const letterMidRow = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
  const letterBottomRow = ['Z', 'X', 'C', 'V', 'B', 'N', 'M'];
  // data
  const curKeyboard : Ref<'province' | 'code'> = ref('province');
  const curCodeIndex = ref(0);
  const code0 = ref('');
  const code1 = ref('');
  const code2 = ref('');
  const code3 = ref('');
  const code4 = ref('');
  const code5 = ref('');
  const code6 = ref('');
  const isValid = computed(
    () => ![code0.value, code1.value, code2.value, code3.value, code4.value, code5.value, code6.value].includes(''),
  );

  const emit = defineEmits(['cancel', 'confirm']);

  function focusCode(code) {
    if (code === 0) {
      curKeyboard.value = 'province';
    } else {
      curKeyboard.value = 'code';
    }
    if (code < 7) {
      curCodeIndex.value = code;
    }
  }
  function provinceInput(province) {
    code0.value = province;
    focusCode(1);
  }
  function onInput(value : string) {
    setValue(value);
    focusCode(curCodeIndex.value + 1);
  }
  function setValue(value : string) {
    switch (curCodeIndex.value) {
      case 1:
        code1.value = value;
        break;
      case 2:
        code2.value = value;
        break;
      case 3:
        code3.value = value;
        break;
      case 4:
        code4.value = value;
        break;
      case 5:
        code5.value = value;
        break;
      case 6:
        code6.value = value;
        break;
    }
  }
  function backspace() {
    setValue('');
    focusCode(curCodeIndex.value - 1);
  }
  function cancel() {
    emit('cancel');
  }
  function confirm() {
    if (isValid.value) {
      const plate = `${code0.value}${code1.value}${code2.value}${code3.value}${code4.value}${code5.value}${code6.value}`;
      emit('confirm', plate);
    }
  }
</script>

<style scoped lang="less">
  .mask-box {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-rows: repeat(2, 50vh);
    align-items: end;
    justify-items: center;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: bold;
  }

  .plate-box {
    width: 690rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 5px;

    .title {
      font-size: 20px;
      color: #333333;
    }

    .plate-code-box {
      padding: 60rpx 0;
      display: grid;
      grid-template-columns: 160rpx 40rpx 430rpx;
      grid-template-rows: 76rpx;
      font-weight: bold;

      .left-box {
        display: grid;
        grid-template-columns: 70rpx 70rpx;
        column-gap: 20rpx;

        .code-item {
          border: 2rpx solid #979797;
          border-radius: 5px;
          padding: 16rpx;
          text-align: center;

          &.cur-code {
            border: 2rpx solid #ff5000;
          }
        }
      }

      .right-box {
        display: grid;
        grid-template-columns: repeat(5, 70rpx);
        column-gap: 20rpx;

        .code-item {
          padding: 16rpx;
          border: 2rpx solid #979797;
          border-radius: 5px;
          text-align: center;

          &.cur-code {
            border-color: #ff5000;
            border-style: solid;
          }
        }
      }
    }
  }

  .keyboard {
    background-color: rgba(210, 213, 219, 90);
    padding-bottom: 32rpx;

    .keymap-province {
      padding: 20rpx;
      display: grid;
      grid-template-rows: repeat(4, 72rpx);
      grid-template-columns: repeat(8, 80rpx);
      gap: 20rpx 10rpx;
    }

    .keymap-code {
      padding: 20rpx 10rpx;

      .row-ten-col {
        display: grid;
        grid-template-rows: 72rpx;
        grid-template-columns: repeat(10, 64rpx);
        column-gap: 10rpx;
        margin-bottom: 20rpx;
      }

      .row-last {
        display: grid;
        grid-template-rows: 72rpx;
        grid-template-columns: repeat(8, 64rpx) 32rpx 96rpx;
        column-gap: 10rpx;
      }
    }
  }

  .key {
    font-size: 32rpx;
    color: #353535;
    line-height: 72rpx;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 1rpx 2rpx 0 #979797;
    border-radius: 5px;

    &.disabled {
      background-color: #f7f7f7;
      color: #ccc;
    }

    .icon-delete {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .btn-confirm {
    height: 80rpx;
    border-radius: 5px;
    font-size: 32rpx;
    word-spacing: 48rpx;
    background-color: #1b91ff;
    color: white;

    &.disabled {
      background-color: #eee;
      color: #999;
    }
  }
</style>